<?php
require_once('database.php');
require_once('get_recommendations.php');
$db = new database('localhost', 'root', '', 'reebonz');

$product_id = $_GET['product_id'];
$related_products = get_related_products($product_id);
array_splice($related_products, 10);

$db->query('SELECT * FROM products WHERE product_id = %d', $product_id);
$product = $db->getRow();

$product['desc'] = preg_replace("/\n+/", "<br/>", $product['desc']);
$product['desc'] = preg_replace("/(<br\/>\r?)+/", "<br/>", $product['desc']);
$product['desc'] = str_replace("\t","&nbsp;&nbsp;&nbsp;&nbsp;",$product['desc']);
//echo $product['desc'];
?>

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery_mobile.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery_mobile.js"></script>
	
	<link rel="stylesheet" href="css/view_product.css" />
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1><?= $product["title"] ?></h1>
        <a href="#" onclick="history.go(-1);" data-icon="arrow-l">Back</a>
    </div><!-- /header -->

    <div data-role="content">
        <div id="product_info">
			<table border="0">
			<tr><td width="100px">
			<div class="product_thumb_div" >
				<img src="<?= $product['thumb'] ?>" class="product_thumb" style="width:100%; height:100%" />
			</div>
			</td>
			<td>
    		<div id="product_title_div">
    			<span id="product_title"> <?= $product['title']?> </span>
    		</div>
    		 
    		<div id="product_price_div">
    			<span id="current_price"> Price: <span id="current_price_number">S$ <?=$product['sell_price']?></span>
    					<span id="you_save"> (-<?=floor(($product['was_price']-$product['sell_price'])/$product['was_price'] * 100)?>%) </span>
    			</span>
    			<span id="original_price">U.P.: S$ <?=$product['was_price']?> </span>
    		</div>
    		<div id="to_product_page_div">
    			<a class="purchase_link" href="#">View full description</a>
    		</div>
			</td>
			</tr>
			</table>

    		<div id="description_div">
    			<span id="description_title">Description</span>
    			<span id="description_detail"><?=$product['desc']?></span>
    		</div>
        </div>
		<div style="float:left;height:43px; margin-top:20px; margin-left:2%;margin-right:2%;width:96%">
			<ul data-role="listview" class="ui-listview">
				<li class="ui-li ui-li-static ui-btn-up-c">Related products</li>
			</ul>
		</div>
        <div style="float:left; margin-left:2%;margin-right:2%;margin-bottom:2%;width:96%">
            <ul id="recommendations" data-role="listview">
                <?php foreach($related_products as $product) { ?>
                <li class="list-item">
                    <a href="view_product.php?product_id=<?=$product['product_id']?>" data-rel="dialog">
                        <img src="<?= $product['thumb'] ?>" class="ui-li-thumb"/>
                        <h3 class="ui-li-heading"><?= substr($product['title'],0,20) ?>... 					
						<div style="float:right; color:#900; margin-right:3%;margin-top:1%;font-size:15px;">
							S$ <?= $product['sell_price']?>
						</div>
						</h3>
                        <p class="ui-li-desc"><?= substr($product['desc'], 0, 30) ?>...</p>
                    </a>
                </li>
                <?php } ?>
            </ul>
        </div>
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>
